<template>
  <div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
      "
    >
      快速检索
    </div>
    <div>
      <div style="margin-top: 15px; margin-bottom: 15px">
        <el-input
          placeholder="请输入检索的关键字"
         
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
      "
    >
      模板选择
    </div>
    <div class="templateChoose">
      <div class="item">
        <span>模板1</span>
        <div class="closebtn">x</div>
      </div>
    </div>
    <div
      style="
        padding-left: 5px;
        width: 100%;
        height: 30px;
        font-size: 15px;
        color: #fff;
        line-height: 30px;
        background-color: #4070a2;
        margin: 0.5rem 0;
      "
    >
      模板备注
    </div>
    <textarea
      name=""
      id=""
      rows="5"
      style="width: 100%; resize: vertical; outline: none; font-size: 1.2rem"
    ></textarea>
    <div class="btnGroup">
      <el-button
        type="primary"
        icon="el-icon-check"
        plain
        style="margin-right: 7px"
        >应用</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        plain
        style="margin-right: 7px"
        >刷新</el-button
      >
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.templateChoose {
  width: 100%;
  height: 15rem;
  background: #fff;

  overflow-y: auto;

  .item {
    height: 15%;
    color: #000;
    display: flex;
    span {
      font-size: 1.2rem;
      width: 95%;
      text-align: left;
    }
    .closebtn {
      cursor: pointer;
      width: 5%;
      font-size: 1.3rem;
      font-weight: 800;
    }
    .closebtn:hover {
      color: #4998f2;
    }
  }
  .item:hover {
    background-color: #ebebeb;
  }
}
.btnGroup {
  display: flex;
  justify-content: flex-end;
}
</style>
